<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { getaGwlist, opentree, getkqzl } from "@/api/request.js";
export default {
  name: "App",
  components: {},
  data() {
    return {
      timeoutObj: null,
      webSocket: null
    };
  },
  mounted() {
    // this.startSocket()
  },
  methods: {
    startSocket() {
      this.timeoutObj = setTimeout(() => {
        this.getSocket(); //重建socket
      }, 2000);
    },
    getSocket() {
      if ("WebSocket" in window) {
        this.webSocket = new WebSocket(this.$wsUrl)
        this.setSocket();
      }
    },
    setSocket() {
      const socket = this.webSocket;
      // 监听socket连接
      socket.onopen = () => {
        console.log("socket连接成功");
        this.timeoutObj = null;
      };
      // 监听socket错误信息
      socket.onerror = () => {
        console.log("连接错误");
      };
      // 监听socket关闭
      socket.onclose = () => {
        console.log("连接断开启动定时任务,2秒后重建");
        this.startSocket();
      };
      // 监听socket消息
      socket.onmessage = msg => {
        console.log(JSON.parse(msg.data), "接收数据")
        localStorage.setItem("wsData", msg.data);
        // switch (msgData.key) {
        //   case "bad":
        //     this.$bus.$emit("changeChuang", JSON.parse(msgData.data));
        //     break;
        //   default:
        //     break;
        // }
      };
    },
    getPoint(callback) {
      opentree().then(res => {
        if (res.success) {
          if (res.data.length) {
            const pointData = res.data.find(el => el.title === "中勘大厦")
              .children;
            console.log(pointData, 5444);
            if (pointData.length) {
              localStorage.setItem("allPointData", JSON.stringify(pointData));
              callback && callback();
            }
          } else {
            this.$message.info("暂无标点数据！");
          }
        }
      });
    },
    getMiamData(data,callback) {
      getaGwlist().then(res => {
        if (res) {
          localStorage.setItem("mianData", JSON.stringify(res.data));
          callback && callback();
        }
      });
    },
    getAirData(callback) {
      getkqzl().then(res => {
        if (res) {
          localStorage.setItem("airData", JSON.stringify(res.data));
          callback && callback();
        }
      });
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100vh;
}
.btn {
  position: fixed;
  left: 30px;
  top: 30px;
  z-index: 999;
}
.all {
  width: 100%;
  height: 100%;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-around {
  justify-content: space-around;
}
/* // .font-family {
   font-family: "number";
   padding-right: 3px;
 }
 .font-black {
   font-size: 24px;
   color: #333333;
   font-weight: bold;
 }
 .font-color {
   background: linear-gradient(180deg, #ffffff 0%, #75c7ff 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 } */
</style>
